import * as React from "react";

export function useScreenSize() {
  const [screenWidth, setScreenWidth] = React.useState<number>(0);

  React.useEffect(() => {
    setScreenWidth(window.innerWidth);
    const handleResize = () => {
      setScreenWidth(window.innerWidth);
    };
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const screenSize = React.useMemo(() => {
    if (screenWidth >= 1536) return "2xl";
    if (screenWidth >= 1280) return "xl";
    if (screenWidth >= 1024) return "lg";
    if (screenWidth >= 768) return "md";
    return "sm";
  }, [screenWidth]);

  return { screenSize, screenWidth };
}
